<template>
	<view class="box">
		<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title="预约服务" bgColor="transparent"
			@rightClick="rightClick" :autoBack="true"> </u-navbar>
		<view :style="{'height':navBarHeight+ 'px'}"></view>
		<view>
			<view class="content-box padding-l-r-30">
				<view class="list-box">
					<text>就诊城市</text>
					<view class="input-box" @click="selctCity">
						<input type="text" v-model="form.city" disabled placeholder="请选择">
						<image src="/static/image/triage/down.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="list-box">
					<text>就诊医院</text>
					<view class="input-box">
						<input type="text" v-model="form.hospital" placeholder="请选择就诊医院"  >
						<!-- <image src="/static/image/triage/down.png" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="list-box">
					<text>就诊日期</text>
					<view class="input-box" @click="calendarShow = true">
						<input v-model="form.jiuzhen_date" placeholder="请选择就诊日期" disabled>
						<image src="/static/image/triage/down.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="list-box">
					<text>联系人</text>
					<view class="input-box">
						<input type="text" v-model="form.name" placeholder="请填写联系人">
					</view>

				</view>
				<view class="list-box">
					<text>联系方式</text>
					<view class="input-box">
						<input type="number" v-model="form.mobile" placeholder="请填写联系方式">
					</view>
				</view>
				<view class="list-box">
					<text>备注</text>
					<view class="input-box">
						<textarea value="form.notes" v-model="form.remark" placeholder="请输入" />
						<!-- <input type="text" v-model="form.illness" placeholder="请填写现病史"> -->
					</view>
				</view>
				<view class="list-btn" @click="reservation">
					立即预约
				</view>
			</view>
			<u-picker :show="show" :columns="columns"></u-picker>
			<u-calendar :show="calendarShow" @confirm="calendarConfirm"></u-calendar>
			<toastTips ref="toast" @linkClick='linkClick'></toastTips>
			<wmCityselect v-model="showPicker" @city-change="handleCityChange" :areaShow='false'></wmCityselect>
		</view>
	</view>
</template>

<script>
	import toastTips from '@/components/toast/index.vue'
	import wmCityselect from '@/components/address/components/address/lib/cityselect.vue'
    import {addHuli} from '@/api/homeCare'
	export default {
		components: {
			toastTips,wmCityselect
		},
		data() {
			return {
				form: {
                    city:'',hospital:'',jiuzhen_date:'',name:'',mobile:'',remark:'',service_id:''
                },
				show: false,
				navBarHeight: 0,
				columns: [
					['北京', '上海', '郑州']
				],
				calendarShow: false,
				showPicker:false
			}
		},
        onLoad(e) {
			this.form.service_id =e.id
		},
		onShow() {
			this.getBarHeight()
            let city = uni.getStorageSync('cityName')
			if(city){
				this.form.city = city
			}
		},
		methods: {
			getBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 获取状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight;

				// 微信小程序默认导航栏高度（单位为 px）
				const defaultNavBarHeight = 44;

				// 总体头部导航栏高度（包含状态栏）
				this.navBarHeight = statusBarHeight + defaultNavBarHeight;

			},
			reservation() {
                // city:'',hospital:'',jiuzhen_date:'',name:'',mobile:'',remark:'',service_id:''
				if(!this.form.city ){
					return uni.showToast({
						icon:'none',
						title:'请选择就诊城市'
					})
				}
                if (!this.form.hospital){
                    return uni.showToast({
						icon:'none',
						title:'请填写预约医院'
					})
                }
                if (!this.form.jiuzhen_date){
                    return uni.showToast({
                        icon:'none',
                        title:'请选择就诊日期'
                    })
                }
                if (!this.form.name){
                    return uni.showToast({
                        icon:'none',
                        title:'请填写联系人'
                    })
                }
                if (!this.form.mobile){
                    return uni.showToast({
                        icon:'none',
                        title:'请填写手机号码'
                    })
                }
                addHuli(this.form).then(res=>{
                    if (res.code==1){
                        this.$refs.toast.getInfo(true, ['您的陪诊服务预约申请已提交'], '继续浏览服务', '查看预约')
                    }else {
                        uni.showToast({
                            icon:'none',
                            title:res.msg
                        })
                    }
                })

			},
			calendarConfirm(e) {
				console.log(e[0]);
				this.form.jiuzhen_date = e[0]
				this.calendarShow = false
			},
			linkClick() {
				console.log(4);
			},
			selctCity(){
				uni.navigateTo({
					url:'/pageA/city/city'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: linear-gradient(180deg, #DDEFF3 0%, #F7F7F7 100%);
	}

	.list-box {
		text {
			font-size: 28rpx;
			color: #000;
			line-height: 90rpx;
		}
	}

	.input-box {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		border: 1px solid #DBDBDB;

		input {
			flex: 1;
			height: 90rpx;
		}

		textarea {
			flex: 1;
			padding: 20rpx;
		}

		image {
			width: 30rpx;
		}
	}

	.list-btn {
		height: 90rpx;
		margin-top: 68rpx;
		background: #43ABC4;
		border-radius: 14rpx;
		color: #fff;
		line-height: 90rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style> -->